<script lang="ts">
export default {
  inheritAttrs: false
}
</script>

<script setup lang="ts">
import { ElTable } from 'element-plus'

const emit = defineEmits(['change-page'])

defineProps({
  pageInfo: {
    type: Object,
    default: () => ({
      currentPage: 1,
      pageSize: 10,
      total: 10
    })
  }
})

// 改变页码
const currentChange = (value: number) => {
  emit('change-page', value)
}

const elTableRef = ref<InstanceType<typeof ElTable>>()

defineExpose({
  elTableRef
})
</script>

<template>
  <div class="basic_table">
    <div
      v-if="$slots.tool"
      class="tool"
    >
      <slot name="tool"></slot>
    </div>
    <el-table
      ref="elTableRef"
      border
      stripe
      v-bind="$attrs"
    >
      <slot></slot>
    </el-table>
    <el-pagination
      background
      :current-page="pageInfo.currentPage"
      :page-size="pageInfo.pageSize"
      :total="pageInfo.total"
      @current-change="currentChange"
    />
  </div>
</template>

<style scoped lang="less">
@import "BasicTable.less";
</style>
